<template>
  <Form ref="form" v-if="show" :model="data" :rules="rules" :label-width="labelWidth"
    :label-position="labelPosition" @submit.native.prevent>
    <Row v-if="collapse" :gutter="24" type="flex" justify="start">
      <Col v-for="(item,index) in queryFormItem" :key="index" v-bind="grid">
        <FormItem :label="item.title" :prop="item.key" >
          <field-cell :config="item.config" v-model="data[item.key]"  @change="$emit('change',data)" @searchEnter="$emit('handleSearch')"></field-cell>
        </FormItem>
      </Col>
    </Row>
    <Row v-if="collapse" :gutter="24" type="flex" justify="end">
      <Col v-bind="grid" class="ivu-text-right">
        <FormItem>
          <Button type="primary" @click="$emit('handleSearch',1)">{{lang.search}}</Button>
          <Button class="ivu-ml-8" @click="$emit('handleReset')">{{lang.reset}}</Button>
          <a v-font="14" class="ivu-ml-8" @click="collapse = !collapse">
            <template v-if="!collapse">
              {{ lang.expand }} <Icon type="ios-arrow-down" />
            </template>
            <template v-else>
              {{lang.collapse}} <Icon type="ios-arrow-up" />
            </template>
          </a>
        </FormItem>
      </Col>
    </Row>
    <Row v-if="!collapse" :gutter="24" type="flex" justify="end">
      <template v-if="!collapse">
        <Col v-for="(item,index) in collapseFormItem" :key="index+item.key" v-bind="grid" class="ivu-text-right">
          <FormItem :label="item.title" :prop="item.key">
            <field-cell :config="item.config" v-model="data[item.key]" @change="$emit('change',data)" @searchEnter="$emit('handleSearch')"></field-cell>
          </FormItem>
        </Col>
      </template>
      <Col v-bind="grid" class="ivu-text-right">
        <FormItem>
          <Button type="primary" @click="$emit('handleSearch',data)">{{lang.search}}</Button>
          <Button class="ivu-ml-8" @click="$emit('handleReset')">{{lang.reset}}</Button>
          <!-- 展开的item大于折叠的item时，再显示展开按钮 -->
          <a v-if="queryFormItem.length > collapseFormItem.length" v-font="14" class="ivu-ml-8"
            @click="collapse = !collapse">
            <template v-if="!collapse">
              {{ lang.expand }} <Icon type="ios-arrow-down" />
            </template>
            <template v-else>
              {{lang.collapse}} <Icon type="ios-arrow-up" />
            </template>
          </a>
        </FormItem>
      </Col>
    </Row>
  </Form>
</template>

<script>
import FieldCell from '../../basic/fieldCell';
export default {
  name: 'table-search',
  components: { FieldCell },
  data(){
    return {
      grid: {
        xs: 24,
        sm: 24,
        md: 12,
        lg: 8,
        xl: 8,
        xxl:8,
      },
      collapse:false,
    }
  },
  props:{
    labelWidth:{
      default:()=>{
        return 100;
      }
    },
    labelPosition:{
      default:()=>{
        return  'right';
      }
    },
    queryFormItem:{
      default:()=>{
        return [];
      }
    },
    collapseFormItem:{
      default:()=>{
        return [];
      }
    },
    rules:{
      default:()=>{
        return {};
      }
    },
    data:{
      default:()=>{
        return {};
      }
    },
    show:{
      default:()=>{
        return true;
      }
    },
  },
  computed:{
    lang(){
      return {
        "en-US": {
          search:'search',
          reset:'reset',
          small:'small',
          expand:'expand',
          collapse:'collapse',
        },
        "zh-CN": {
          search:'查询',
          reset:'重置',
          expand:'展开',
          collapse:'收起',
        },
      }[this.G_Locale]
    },
  }
}
</script>

<style scoped>
  .collapse-form {
    width: 100%;
    position: absolute;
    left:0px;
    top:0px;
    z-index: 99;
  }
</style>